<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="renderer" content="webkit">
<meta name="force-rendering" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link charset="utf-8" rel="stylesheet" type="text/css" href="/static/ali/agreement.css" />
<link charset="utf-8" rel="stylesheet" type="text/css" href="/static/iconfont_1169900/iconfont.css">
	<style>
		input[type=button]{
		width: 150px;
		height: 30px;
		background-color: #FFB800;
		border: 0;
		border-radius: 15px;
		color: #fff;
		}
		input[type=button].on {
			background-color: #eee;
			color: #ccc;
			cursor: not-allowed;
		}
	</style>
<title>实名认证 - 友利钱包</title>
</head>
<body>
<header>
	<div class="header-wrap">
		<div class="logo">
			<a><img align="bottom" alt="logo" src="/static/logo.png"></a>
			<strong>开通友利钱包</strong>
		</div>
		<div class="nav-links">
			<a>#(merchUser.userName)-#(merchUser.name)</a>
			<a>正在开通友利钱包</a>
		</div>
	</div>
</header>
<div class="container">
	<ol class="step-container">
		#if(isVerify)
		<li class="step">
		#else
		<li class="step active">
		#end
			<div class="step-line">-</div>
			<div class="step-icon">
				<i class="iconfont icon-lingxing"></i>
				<span class="step-number">1</span>
				<span class="step-text">实名认证</span>
			</div>
		</li>
		#if(isVerify && !isSign)
		<li class="step active">
			#else
		<li class="step">
			#end
			<div class="step-line">-</div>
			<div class="step-icon">
				<i class="iconfont icon-lingxing"></i>
				<i class="step-number">2</i>
				<span class="step-text">电子签约</span>
			</div>
		</li>

		#if( isVerify && isSign  && !isNotEmptyPayPassword)
		<li class="step active">
		#else
		<li class="step">
		#end
			<div class="step-line">-</div>
			<div class="step-icon">
				<i class="iconfont icon-lingxing"></i>
				<i class="step-number">3</i>
				<span class="step-text">设置支付密码</span>
			</div>
		</li>

		#if( isVerify && isSign  && isNotEmptyPayPassword)
		<li class="step active">
		#else
		<li class="step">
		#end
			<div class="step-icon">
				<i class="iconfont icon-lingxing"></i>
				<i class="step-number">4</i>
				<span class="step-text">成功</span>
			</div>
		</li>
	</ol>


	<ul class="tab-choose">
		#if(type=='personal')
		<li class="#if(type=='personal')active#end">
			<a href="#"><i class="iconfont icon-icon_signal_fill"></i>个人实名网签</a>
		</li>
		#else
		<li class="#if(type=='company')active#end">
			<a href="#"><i class="iconfont icon-icon_boss_fill"></i>企业实名网签</a>
		</li>
		#end
	</ul>


	#if(!isVerify || !isSign || !isNotEmptyPayPassword)
	<div class="tab-panel">
		#if(isVerify && !isSign)
		<form action="/api/netSignAuto" method="post">
		#else if(isVerify && isSign && !isNotEmptyPayPassword)
		<form id="from01" onsubmit="return false" action="#" method="post">
		#else if(!isVerify)
		<form action="/api/netSign" method="post">
		#else
		<form action="/customer/index" method="post">
		#end
			<input type="hidden" name="me" value="me">
			<input type="hidden" name="userName" value="#(merchUser.userName)">
			<input type="hidden" name="passWord" value="#(merchUser.password)">
			<input type="hidden" name="type" value="#(useType)">
			<input type="hidden" name="returnUrl" value="#(payUrl)">
			<input type="hidden" name="loginType" value="#(loginType)">
			<input type="hidden" name="inCome" value="#(loginType)">

			#if(isVerify && isSign && !isNotEmptyPayPassword)
			<input type="hidden" name="phone" value="#(merchUser.userName)">
			<div class="form-item">
				<div class="form-label">设置支付密码</div>
				<div class="form-value"><input type="password" name="payPassword1" minlength="6" maxlength="6" required="required" placeholder="支付密码不能和登录密码一样"></div>
			</div>
			<div class="form-item">
				<div class="form-label">再次设置支付密码</div>
				<div class="form-value"><input type="password" name="payPassword2" minlength="6" maxlength="6" required="required" placeholder="支付密码不能和登录密码一样"></div>
			</div>
			<div class="form-item vcode">
				<div class="form-label">短信校验码</div>
				<div class="form-value"><input type="number" name="code" placeholder="六位数字">
					<input type="button" id="butcode" value="获取验证码" onclick="sendSMS('#(merchUser.userName)')"></div>
			</div>
			#else if(isVerify && !isSign)
			<a class="iconfont" href="#(hetongUrl)" target="_blank">#(heTongConfig.title) 点击查看合同内容</a>
			#else
			<i class="iconfont">注意:点击"下一步",<br>
				将要调转到第三方法大大实名网签平台进行实名认证和合同签署。
				<br>法大大-为各行业提供电子合同、电子文件签署及存证服务,<br>
				并整合提供司法鉴定和律师服务。</i>
			#end

			<div class="form-item">
				<div class="form-label"></div>
				#if(isVerify && isSign && !isNotEmptyPayPassword)
				<div class="form-value"><button onclick="setPayPassword()" class="submit">下一步</button></div>
				#else
				<div class="form-value"><button class="submit">下一步</button></div>
				#end
			</div>
		</form>
	</div>
	#end

</div>
</body>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="/static/layui/layui.js"></script>
<script>

	function msginfo(msg) {
        layui.use('layer', function () {
            var layer = layui.layer;
            layer.msg(msg);
        });
    }
</script>
<script type="text/javascript">


    //msginfo("oooooooopppppppppppp");

	function myalert(msg, title) {
        layui.use('layer', function () {
            var layer = layui.layer;
            layer.alert(msg, {title: title});
        });
    }

	function sendSMS(phone){
	    $.ajax({
        	type:"GET",
            url: "/customer/sendsms?type=set&phoneNo="+phone,
            dataType:"json", //预期服务器返回数据的类型
        	success:function(res){
        	    console.log(JSON.stringify(res));
                msginfo(res.msg);
                if(res.code!=0){return;}
                btnCheck();
			},
			error:function(res){
                myalert("网络错误!", "错误");
			}
	    })
	}



    //$("input[type='button']").click(btnCheck);

    /**
     * [btnCheck 按钮倒计时常用于获取手机短信验证码]
     */
    function btnCheck() {

        $("input[type='button']").addClass("on");

        var time = 60;

        $("input[type='button']").attr("disabled", true);

        var timer = setInterval(function() {

            if (time == 0) {

                clearInterval(timer);

                $("input[type='button']").attr("disabled", false);

                $("input[type='button']").val("获取验证码");

                $("input[type='button']").removeClass("on");

            } else {

                $("input[type='button']").val(time + "秒");

                time--;

            }

        }, 1000);

    }

    function setPayPassword(){
        var toUrl = '#(payUrl)';
        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/customer/setPayPassword" ,//url
            data: $('#from01').serialize(),
            success: function (result) {
                console.log(JSON.stringify(result));//打印服务端返回的数据(调试用)
                if (result.code == 0) {
                    msginfo("支付密码设置成功");
                    window.location.href=toUrl;
                }else {
                    alert("错误:" + JSON.stringify(result));
				}
            },
            error : function() {
                alert("错误:" + "网络错误,请重试...");
            }
        });
    }

</script>
</html>
